<template>
    <div class="app-container collect">
        <span class="title">设置</span>
        <div class="content">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="个人设置" name="first">
                    <setting></setting>
                </el-tab-pane>
                <el-tab-pane label="头像设置" name="second">
                    <headset></headset>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import setting from "@/components/set/setting";
import headset from "@/components/set/headset";
export default {
  data() {
    return {
      activeName: "first"
    };
  },
  components: {
    setting,
    headset
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style lang="less" scoped>
.collect {
  height: 100%;
  width: 100%;
  .content {
    width: 100%;
  }
  .title {
    font-size: 24px;
    margin-bottom: 16px;
    display: block;
  }
}
</style>
<style lang="less">
.collect {
  .content {
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
    .el-tabs__item {
      font-size: 18px;
    }
    .el-tabs__item:hover {
      color: #15c798;
    }
    .el-tabs__item.is-active {
      color: #15c798;
    }
    .el-tabs__active-bar {
      background-color: #15c798;
    }
    .el-tabs__nav {
      padding-bottom: 5px;
    }
  }
}
</style>



